<!--
 * @Author: quit
 * @Date: 2021-12-20 17:21:21
 * @LastEditTime: 2022-01-13 20:00:19
 * @Descripttion: ToPo布局页面
-->
<template>
    <!-- 监听了鼠标释放事件(抬起)以及鼠标滑动事件 - 主要用于调整画面大小 -->
    <div id="ToPo" @mouseup="onMouseup($event)" @mousemove="onMousemove($event)">
        <!-- 顶部栏区 -->
        <div class="topo-navbar">
            <!-- Navbar插槽 -->
            <slot name="top" />
        </div>
        <!-- 画布与工具区 -->
        <div class="topo-container">
            <!-- 画布区 -->
            <div class="topo-main" :style="{ left: mainVolume.left + 'px', right: mainVolume.right + 'px' }">
                <!-- 画布插槽 -->
                <slot name="center" />
            </div>
            <!-- 拖动栏 -->
            <div class="wresize-handler" :style="{ right: wresize.right + 'px' }" @mousedown="onMouseDownRight($event)" />
            <!-- 工具与属性配置区 -->
            <div class="topo-tool" :style="{ width: toolVolume.width + 'px' }">
                <!-- 容器 -->
                <div class="topo-tool-container">
                    <!-- 工具区 -->
                    <div class="tool-container" :style="{ top: toolsVolume.top + 'px', bottom: toolsVolume.bottom + 'px' }">
                        <!-- 工具插槽 -->
                        <slot name="tool" />
                    </div>
                    <!-- 拖动栏 -->
                    <div class="tool-wresize-handler" :style="{ bottom: toolwresize.bottom + 'px' }" @mousedown="onMouseDownTool($event)" />
                    <!-- 属性配置区 -->
                    <div class="properties-container" :style="{ height: propertiesVolume.height + 'px' }">
                        <!-- 属性插槽 -->
                        <slot name="properties" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ToPo',
    components: {},
    props: {
        // 初始化值,用于调整页面大小
        leftWidth: {
            type: Number,
            default: 0
        },
        rightWidth: {
            type: Number,
            default: 330
        },
        topHieght: {
            type: Number,
            default: 0
        },
        bottomHieght: {
            type: Number,
            default: 400
        }
    },
    data() {
        return {
            flag: null, // 事件开关变量
            pageX: null, // 当前鼠标位于整个页面的X轴位置
            pageY: null,
            /**
             * @description: 使用定位来确定大小，以下变量都用于记录位置信息
             * @param  {Number} temp 用于记录当前区域大小,在鼠标按下时使用
             */
            mainVolume: { left: this.leftWidth, right: this.rightWidth, temp: 0 }, // 滑动何止
            wresize: { right: this.rightWidth - 5, temp: 0 },
            toolVolume: { width: this.rightWidth - 5, temp: 0 },
            toolsVolume: { top: this.topHieght, bottom: this.bottomHieght, temp: 0 },
            toolwresize: { bottom: this.bottomHieght - 5, temp: 0 },
            propertiesVolume: { height: this.bottomHieght - 5, temp: 0 }
        }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    created() {}, // 生命周期 - 创建完成（可以访问当前this实例）
    mounted() {}, // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
    // 方法集合
    methods: {
        // ToPo 鼠标抬起事件,清除页面事件,并重新渲染区域
        onMouseup() {
            if (!this.flag) {
                return
            }
            if (this.onResize) {
                this.onResize(this.flag)
            }
            this.flag = null
        },
        // ToPo 鼠标移动事件,调整main与tool区域大小
        onMousemove(event) {
            // event.which 鼠标按键 1 为左键 2 中间 3 右键 , 如果不是鼠标左键则终止事件
            if (event.which !== 1) {
                if (!this.flag) {
                    this.flag = null
                }
                return
            }
            if (!this.flag) {
                return
            }
            // 移动值
            const moveWidth = event.pageX - this.pageX
            const moveHeight = event.pageY - this.pageY
            // 大小处理
            if (this.flag === 'wresize') {
                this.wresize.right = this.wresize.temp - moveWidth
                this.mainVolume.right = this.mainVolume.temp - moveWidth
                this.toolVolume.width = this.toolVolume.temp - moveWidth
            } else if (this.flag === 'toolWresize') {
                this.toolwresize.bottom = this.toolwresize.temp - moveHeight
                this.propertiesVolume.height = this.propertiesVolume.temp - moveHeight
                this.toolsVolume.bottom = this.toolsVolume.temp - moveHeight
            }
        },
        // 大小调整栏点击事件,记录元素当前位置
        onMouseDownRight(event) {
            // 当前Dom元素
            // const dom = event.currentTarget
            this.flag = 'wresize'
            this.pageX = event.pageX
            this.wresize.temp = this.wresize.right
            this.toolVolume.temp = this.toolVolume.width
            this.mainVolume.temp = this.mainVolume.right
        },
        // tool栏大小的调整
        onMouseDownTool(event) {
            this.flag = 'toolWresize'
            this.pageY = event.pageY
            this.toolwresize.temp = this.toolwresize.bottom
            this.propertiesVolume.temp = this.propertiesVolume.height
            this.toolsVolume.temp = this.toolsVolume.bottom
        }
    }
}
</script>
<style lang="scss" scoped>
#ToPo {
    .topo-navbar {
        width: 100%;
        height: 50px;
    }
    .topo-container {
        position: relative;
        width: 100%;
        height: calc(100% - 55px);
        margin-top: 5px;
        .topo-main {
            position: absolute;
            top: 0px;
            bottom: 0px;
        }
        .wresize-handler {
            position: absolute;
            top: 0px;
            bottom: 0px;
            width: 5px;
            cursor: w-resize;
        }
        .topo-tool {
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: 0px;
            .topo-tool-container {
                position: relative;
                width: 100%;
                height: 100%;
                .tool-container {
                    position: absolute;
                    left: 0px;
                    right: 0px;
                }
                .tool-wresize-handler {
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    height: 5px;
                    cursor: n-resize;
                }
                .properties-container {
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                }
            }
        }
    }
}
</style>
